<template>
    <div>
        <!-- 顶部内容 -->
        <van-nav-bar
            title="搜索"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <!--第一部分 搜索-->
        <div class="search_top">
            <div class="search">
                <input type="text" @click="SearchInput" v-model="SearchText" class="search_input" placeholder="请输入关键字"/>
                <span @click="SearchPro">搜索</span>
            </div>
        </div>

        <!--历史搜索-->
        <div class="history" v-if="history">
            <div class="history_title">
                <span>历史搜索</span>
                <img src="../../images/delete.png" mode="widthFix" style="width:5%;" @click="cleanhistory" />
            </div>
            <div class="history_text">
                <span v-for="it in newArray" :key="it">{{item}}</span>
            </div>
        </div>

        <div class="none" v-if="noneview">
            <img src="../../images/null.png" style="width:20%" />
            <span>抱歉，没有相关商品</span>
        </div>

        <!--第二部分 内容-->
        <div class='swiper_con' v-if="SearchList">
            <div class='swiper_con_view' v-for="item in SearchInfoData" :key="item.id">
                <img src="" mode="widthFix" style="width:100%" />
                <div style="width:90%;margin:5%;">
                    <span style="font-size:32rpx;font-weight: bold;">{{item.proname}}</span>
                    <div class="swiper_con_view_view">
                        <div style="width:80%;">
                            <span style="font-size:28rpx;color:red;font-weight: bold;">￥{{item.proprice}}</span>
                            <span style="font-size:24rpx;color:#B8B8B8;margin-left:5%;margin-left: 50rpx;">商家:{{item.business.busname}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getSearchProApi } from '../../axios/search'
    export default {
        data() {
            return {
                //搜索框中的值
                SearchText:'',
                SearchInfoData:[],
                SearchList:false,
                SearchImageUrl:"http://127.0.0.1/images/",
                history: false, //显示历史记录
                historyArray: [], //历史记录数组,
                newArray: [], //添加历史记录数组
                noneview: false, //显示未找到提示
            }
        },

        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },

            //搜索输入框事件
            SearchInput(){
                //当删除input的值为空时
                if (this.SearchText === "") 
                {
                    this.history=true //显示历史记录
                    this.SearchList=false //隐藏商品列表
                }
            },

            //搜索事件
            async SearchPro(){
                let sss = true;//定义未找到提示

                if (this.SearchText !== "") 
                {
                    //将搜索框的值赋给历史数组
                    this.historyArray.push(this.SearchText);
                    //模糊查询 循环查询数组中的title字段
                    for (let index in this.SearchInfoData) 
                    {
                        let num = this.SearchInfoData[index].proname.indexOf(SearchText);
                        let temp = 'SearchInfoData[' + index + '].status';
                        if (num != -1) 
                        { 
                            //不匹配的不显示
                            [temp]= 1,
                            sss = false //隐藏未找到提示
                        }
                    }
                    this.history=false, //隐藏历史记录
                    this.noneview=sss, //隐藏未找到提示
                    this.SearchList=true, //显示商品列表
                    this.newArray=this.historyArray //给新历史记录数组赋值
                }
                else{
                    this.noneview=true, //显示未找到提示
                    this.SearchList=false, //隐藏商品列表
                    this.history=false //隐藏历史记录
                }
                

                //获取商品信息接口
                this.SearchInfoData = await getSearchProApi(this.SearchText)
            },

            //清除历史记录
            cleanhistory(){
                this.history=false, //隐藏历史记录
                this.historyArray=[], //清空历史记录数组
                this.newArray=[],
                this.SearchText="" //清空搜索框
            }
        },
    }
</script>

<style lang="less" scoped>
    /*第一部分 搜索*/
    .search_top{
        padding: 20px;
        background-color: aliceblue;
        .search{
            display: flex;
            justify-content: space-between;
            .search_input{
                border: 1px solid #999;
                border-radius: 10px;
                font-size: 18px;
                width: 80%;
                &::placeholder{
                    font-size: 14px;
                    padding-left: 10px;
                }
            }
        }
    }

    /*第二部分 历史搜索*/
    .history {
        background-color: white;
        padding: 4%;
        .history_title {
            font-size: 30rpx;
            display: flex;
            justify-content: space-between;
            color: #a8a7a7fa;
            align-items: center;
        }
        .history_text {
            padding: 4% 0;
            display: flex;
            flex-wrap: wrap;
            > span {
                background-color: #f7f7f7;
                padding: 1% 3%;
                margin: 2%;
                border-radius: 40rpx;
                font-size: 30rpx;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
    }
    
    .none{
        margin-top: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    //内容
    .swiper_con {
        width: 96%;
        margin-left: 2%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        .swiper_con_view {
            width: 48%;
            height: 430rpx;
            background-color: white;
            margin: 10rpx 0;
            border: 3rpxx solid #1AFA29;
            box-shadow: 3px 3px 3px #1AFA29;
            &:nth-child(even){
                margin-left: 4%;
            }
            .swiper_con_view_view {
                margin-top: 5%;
                display: flex;
                align-items: center;
            }
        }
    }
</style>